<template>
    <div class="ymsbanner">
        <h1 class="title">PRODUCT REGISTRATION</h1>
        <h2 class="title2">To actiyate your warranty, please enter Amazon Order ID(17-Digit)</h2>
        <div class="container">
            <el-form :model="from" ref="ruleForm" class="demo-ruleForm">
                <el-form-item>
                    <p class="label">Amazon Order Id / Order# / Purchase Order (3-7-7)</p>
                    <el-input class="input" type="text" @input="inputChange" :maxlength="19" placeholder="e.g. 111-1111111-1111111" v-model="from.num" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="submitBtn" size="medium" type="primary" @click="submit">SUBMIT</el-button>
                </el-form-item>
            </el-form>
            <ul class="iconList">
                <li class="iconList-item">
                    <i class="iconfont icon-extendwarranty"></i>
                    &nbsp;Warranty Extension
                </li>
                <li class="iconList-item">
                    <i class="iconfont icon-liwu"></i>
                    &nbsp;Priority Customer Support
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {post} from '../../api/index'
    export default {
        data() {
            return {
                from: {
                    num: ''
                }
            }
        },
        methods: {
            submit() {
                if (!this.from.num) {
                    this.errorFun();
                    return
                }
                let params = {
                    "orderId": this.from.num,
                }
                post('/landing_page/selectOrderMatching', params).then(res => {
                    if (res.code === 200 && res.data && res.data[0]) {
                        this.$router.push({path:'/userInfo', query: { orderData: res.data[0]}})
                    } else {
                        this.errorFun();
                    }
                })
            },
            inputChange() {
                let _this = this;
                switch(this.from.num.length){
                    case 3: _this.from.num += '-'; break;
                    case 11: _this.from.num += '-'; break;
                    // case 19:  _this.from.num += '-'; break;
                }
            },
            errorFun() {
                this.$confirm('The order number has not been synchronized yet, please resubmit in 3 days', 'Tips', {
                    showConfirmButton: false,
                    cancelButtonText: 'cancel',
                    type: 'error'
                }).catch(() => {});
            }
        }
    }
</script>

<style lang="less" scoped>
@import url(../../assets/font/iconfont.css);
.ymsbanner{
    width: 100%;
    height: 150px;
    line-height: 150px;
    background-image: url(../../assets/registration.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    .title{
        text-align: center;
        font-size: 56px;
        color: #fff;
    }
    .title2{
        padding: 35px 0;
        margin: 0;
        line-height: 1;
        text-align: center;
        color: #fb9c2e;
        font-size: 18px;
    }
}
.container{
    width: 80%;
    max-width: 650px;
    padding: 30px 20px;
    // border: 1px solid #aaa;
    // border-radius: 5px;
    margin: 0 auto;
    // background: rgba(#fff);
    .iconList{
        font-size: 32px;
        &-item{
            height: 40px;
            display: flex;
            align-items: center;
            font-size: 16px;
            color: #fb9c2e;
            width: 240px;
            margin: 0 auto;
            margin-bottom: 12px;
            .iconfont{
                display: inline-block;
                width: 36px;
                height: 36px;
                border-radius: 50%;
                background: #fb9c2e;
                text-align: center;
                line-height: 36px;
                font-size: 20px;
                color: #fff;
                margin-right: 10px;
            }
        }
    }
    .submitBtn{
        width: 100%;
        height: 50px;
    }
    .label{
        text-align: left;
        line-height: 1;
        color: #2c3e50;
        font-weight: 700;
        margin-bottom: 12px;
        font-size: 16px;
    }
    .input{
        height: 50px;
    }
    /deep/ .el-input__inner{
        height: 100%;
    }
}
@media only  screen and  (max-width:900px){
    .ymsbanner{
        background: none;
    }
    .ymsbanner .title2,
    .ymsbanner .title{
        display: none;
    }
}
</style>